<template>
    <div class="user-wrapper">
        <div class="content-box">
            <a-dropdown>
                <span class="action ant-dropdown-link user-dropdown-menu">
                    <a-avatar class="avatar" :size="30" :src="avatar" />
                    <span>{{ timeFix }}，{{ username }}</span>
                </span>
                <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
                    <a-menu-item style="flex: 1;width: 100%;" key="0">
                        <a style="flex: 1;width: 100%;" href="javascript:;" @click="handleLogout">
                            <a-icon type="logout" />
                            <span>退出登录</span>
                        </a>
                    </a-menu-item>
                    <a-menu-item style="flex: 1;width: 100%;" key="0">
                        <a style="flex: 1;width: 100%;" href="javascript:;" @click="settingPassword">
                            <a-icon type="setting" />
                            <span>修改密码</span>
                        </a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
        <a-modal :title="ModalTitle" v-if="visiblePassword" v-model="visiblePassword" :width="620" :centered="true" :maskClosable="false" @ok="handlePasswordOk" @cancel="handlePasswordCancel">
            <div style="padding-left: 10px;">
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="用户名" prop="username">
                        <a-input v-model="form.username" placeholder="请输入用户名" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="原密码" prop="password">
                        <a-input v-model="form.password" placeholder="请输入原密码" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="新密码" prop="newPassword">
                        <a-input v-model="form.newPassword" placeholder="请输入新密码" allowClear />
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import NoticeIcon from '@/components/NoticeIcon';
    import { mapActions, mapGetters, mapState } from 'vuex';
    import Vue from 'vue';
    import { ACCESS_TOKEN, USER_DATA, USER_RULE } from '@/store/mutation-types';
    import { logout, setPassword } from '@/api/passport';
    import { showErrors, showError, showSuccess } from '@/utils/showMsg';
    import { timeFix } from '@/utils/util';

    export default {
        name: 'UserMenu',
        data() {
            return {
                timeFix: timeFix(),
                isClick: true,
                visible: false,
                username: '',
                avatar: '',
                pid: '',

                
                labelCol: { span: 4 },
                wrapperCol: { span: 20 },
                visiblePassword:false,
                ModalTitle:'修改密码',
                form:{
                  username:'',
                  password:'',
                  newPassword:''
                },
                rules:{
                  username: [
                    { required: true, message: "请输入用户名!", trigger: "blur" },
                  ],
                  password: [
                    { required: true, message: "请输入原密码!", trigger: "blur" },
                  ],
                  newPassword: [
                    { required: true, message: "请输入新密码!", trigger: "blur" },
                  ],
                },
            };
        },
        components: {
            ...mapState({
                UserName: state => state.user.name,
            }),
            NoticeIcon,
        },
        mounted() {
            const user = Vue.ls.get(USER_DATA);
            if (this.username !== null) {
                this.username = user.name;
                this.avatar = user.headimg;
                this.pid = user.pid;
            } else {
                this.username = '亲，请重新登陆';
            }
        },
        methods: {
            // ...mapActions(['Logout']),
            // ...mapGetters(['nickname', 'avatar']),
            handleLogout() {
                const that = this;
                this.$confirm({
                    title: '提示',
                    content: '真的要注销登录吗 ?',
                    onOk() {
                        // logout()
                        //     .then(res => {
                        //         if (res.data.code == 1) {
                        //             showSuccess('退出成功');
                        //             Vue.ls.remove(ACCESS_TOKEN);
                        //             Vue.ls.remove(USER_DATA);
                        //             Vue.ls.remove(USER_RULE);
                        //             window.location.reload();
                        //         } else if (res.data.code == -1 && res.data.msg == '无权限操作') {
                        //             showSuccess('退出成功');
                        //             Vue.ls.remove(ACCESS_TOKEN);
                        //             Vue.ls.remove(USER_DATA);
                        //             Vue.ls.remove(USER_RULE);
                        //             window.location.reload();
                        //         } else {
                        //             showError(res.data.msg);
                        //         }
                        //     });
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                Math.random() > 0.5 ? resolve : reject
                                // Vue.ls.remove(ACCESS_TOKEN);
                                Vue.ls.clear();
                                window.location.reload();
                            }, 1000);
                        }).catch(() => console.log('Oops errors!'));
                    },
                    onCancel() {},
                });
            },

            // 修改密码
            settingPassword(){
              const that = this;
              const user = Vue.ls.get(USER_DATA);
              this.form.username = user.username;
              that.visiblePassword = true
            },

            // 修改密码弹窗确认
            handlePasswordOk(){
              const that = this;
              that.$refs["ruleForm"].validate( async (valid) => {
                if(valid){
                  let res = await setPassword(that.form)
                  if(res.data.code == 0){
                    showSuccess('修改成功！')
                    that.visiblePassword = false;
                    that.handlePasswordCancel()
                    that.$refs.ruleForm.resetFields();
                  }else{
                    showError(res.data.msg)
                  }
                }
              })
            },

            // 修改密码弹窗取消
            handlePasswordCancel(){
              const that = this;
              that.form.username = '';
              that.form.password = '';
              that.form.newPassword = ''
            }
        },
    };
</script>
<style lang="less" scoped>
</style>